/**
 * @description 一个高阶函数，用于生成一个管理特定滚动条的 Vue mixin。
 * @param {string} refValue - 组件中需要监听滚动事件的元素的 ref 值。
 * @returns {object} - 一个 Vue mixin 对象。
 */
export default function(refValue) {
  return {
    /**
     * 当混入该 mixin 的组件挂载后执行。
     */
    mounted() {
      // 通过事件总线监听 setMainScroll 事件，以便其他组件可以控制该元素的滚动位置。
      this.$bus.$on("setMainScroll", this.handleSetMainScroll);
      // 为指定的 DOM 元素添加原生的 scroll 事件监听器。
      this.$refs[refValue].addEventListener("scroll", this.handleMainScroll);
    },
    /**
     * 当混入该 mixin 的组件销毁前执行。
     */
    beforeDestroy() {
      // 在组件销毁前，最后触发一次 mainScroll 事件，并传递一个 undefined。
      // 这可以通知其他监听者，该滚动容器即将消失。
      this.$bus.$emit("mainScroll");
      // 移除事件总线上的监听器，防止内存泄漏。
      this.$bus.$off("setMainScroll", this.handleSetMainScroll);
      // 移除 DOM 元素上的 scroll 事件监听器，防止内存泄漏。
      this.$refs[refValue].removeEventListener("scroll", this.handleMainScroll);
    },
    methods: {
      /**
       * 用于响应 setMainScroll 事件，设置元素的滚动条位置。
       * @param {number} scrollTop - 滚动条要设置的垂直位置。
       */
      handleSetMainScroll(scrollTop) {
        // 直接操作 DOM 元素的 scrollTop 属性，将其滚动到指定位置。
        this.$refs[refValue].scrollTop = scrollTop;
      },
      /**
       * 当元素发生滚动时触发的回调函数。
       */
      handleMainScroll() {
        // 通过事件总线广播 mainScroll 事件，并将滚动的 DOM 元素本身作为参数传递出去。
        // 这样，应用中的任何其他组件都可以监听到这个滚动事件并获取到滚动容器的实时状态。
        this.$bus.$emit("mainScroll", this.$refs[refValue]);
      },
    },
  };
}

